<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日出</title>
    <!--
        摘录自:
        程序员210行纯css代码制作日出动画特效＋末附编程学习资料
        https://news.html5.qq.com/share/5822447874047592053?url=http%3A%2F%2Fkuaibao.qq.com%2Fs%2F20190222A08VZZ00&sh_sid=5__13849ad3004535d0__6589903d89040639d0ebe7a813b788cb&ch=060000&qbredirect=&share=true&sc_id=I79tDuC
     -->
    <style type="text/css">
        html {
            background-color: black;
            overflow: hidden;
        }

        .container,
        .sea,
        .sky,
        .sun,
        .light,
        .bird,
        .birdr1,
        .birdr,
        .fin,
        .wave {
            position: absolute;
        }

        .container {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            /*top: 50%;*/
            left: 50%;
            margin-left: -50%;
            /*margin-top: -200px;*/
        }

        .sky {
            opacity: .8;
            width: 100%;
            height: 50%;
            top: 0;
            background: radial-gradient(at 50% 70%, #820, #610, #400, #100);
            z-index: 30;
        }

        .sea {
            width: 100%;
            height: 50%;
            top: 50%;
            background: radial-gradient(at 50% 0%, #007, #004);
            z-index: 60;
        }

        .sun {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            left: 45%;
            z-index: 40;
            background: linear-gradient(#ff0, #d00);
            box-shadow: 0 0 50px 1px #f20, 0 0 20px 3px #f33;
            animation: rise 20s ease forwards;
        }

        @keyframes rise {
            0% {
                top: 50%;
            }
            100% {
                top: 8%;
            }
        }

        .light {
            opacity: .5;
            left: 0%;
            width: 100%;
            height: 100%;
            background: radial-gradient(at 50% 0%, #ff0, transparent);
            z-index: 60;
            animation: over 12s ease forwards;
        }

        @keyframes over {
            0% {
                opacity: 0;
            }
            100% {
                opacity: .5;
            }
        }

        .bird {
            opacity: 1;
            top: 50px;
            left: 00px;
            width: 10px;
            height: 8px;
            border: 2px solid black;
            border-radius: 50%;
            border-top-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
            transform: rotateZ(-75deg);
            animation: move 25s linear infinite, flap .5s linear alternate infinite;
            z-index: 70;
        }

        @keyframes move {
            0% {
                left: 0px;
            }
            100% {
                left: 100%;
            }
        }

        .birdr {
            opacity: 1;
            top: 50px;
            width: 10%;
            height: 8px;
            border-radius: 50%;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            transform: rotateZ(75deg);
            margin: 0 8px;
            animation: mover 25s linear infinite, flap .5s linear alternate infinite;
            z-index: 70;
        }

        @keyframes mover {
            0% {
                left: -0px;
            }
            100% {
                left: 100%;
            }
        }

        .bird1 {
            opacity: 1;
            top: 45px;
            left: 0;
            width: 10%;
            height: 8px;
            border: 2px solid black;
            border-radius: 50%;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            transform: rotateZ(-90deg);
            animation: move 25s linear infinite 1.5s, flap .5s linear alternate infinite 1.5s;
            z-index: 70;
        }

        @keyframes flap {
            0% {
                border-radius: 90%;
            }
            100% {
                border-radius: 10%;
            }
        }

        .birdr1 {
            opacity: 1;
            top: 45px;
            width: 10%;
            height: 8px;
            border: 2px solid black;
            border-radius: 50%;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            transform: rotateZ(90deg);
            margin: 0 8px;
            animation: mover 25s linear infinite 1.5s, flap .5s linear alternate infinite 1.5s;
            z-index: 70;
        }

        .fin {
            border: 30px solid black;
            top: 90%;
            left: 100%;
            z-index: 100;
            border-top: 0px solid transparent;
            border-left: 30px solid transparent;
            border-right: 10px solid transparent;
            border-radius: 0 0 2px 10px;
            animation: swim 30s linear forwards 10s;
        }

        @keyframes swim {
            0% {
                left: 100%;
            }
            100% {
                left: -25%;
            }
        }

        .wave {
            margin: 26px 7px;
            border-top: 6px solid rgba(50, 50, 140, .3);
            border-left: 3px solid transparent;
            border-right: 50px solid transparent;
            transform: rotateZ(6deg);
            z-index: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sky"></div>
        <div class="sea">
            <div class="light"></div>
        </div>
        <div class="sun"></div>
        <div class="bird1"></div>
        <div class="birdr1"></div>
        <div class="bird"></div>
        <div class="birdr"></div>
        <div class="fin">
            <div class="wave"></div>
        </div>
    </div>
</body>
</html>
